<
<template>
  <!-- wide自定义指令,必须用''包裹,如果有column添加背景色 -->
  <div v-theme:column="'wide'" id="show-blogs">
    <!-- <div v-theme="'wide'" id="show-blogs"></div> -->
    <h1>博客总览</h1>
    <input type="text" v-model="search" placeholder="搜索" />
    <div v-for="blog in filteredBlogs" class="single-blog">
      <!--rainbow彩虹色的title自定义指令 -->
      <!-- 自定义过滤器 title改成大写-->
      <!-- 点击title跳转到/blog/后面的指定id -->
      <router-link :to="'/blog/' + blog.id">
        <h2 v-rainbow>{{ blog.title | touppercase }}</h2>
      </router-link>

      <article>{{ blog.content | snippet }}</article>
    </div>
  </div>
</template>

<script>
export default {
  name: 'show-blogs',
  data() {
    return {
      blogs: [], //展示的信息
      search: '',
    };
  },
  //https://jsonplaceholder.typicode.com/posts
  //访问本地文件只能放在static里
  created() {
    this.$http.get('https://vuedemo-5710a-default-rtdb.firebaseio.com/posts.json').then(function (data) {
      // console.log(data.json());
      return data.json()
        // console.log(data);
      // this.blogs = data.body.slice(0, 10); //返回十条数据给blogs
      //   console.log(this.blogs);
    }).then(function(data){
      var blogsArray=[];
      for(let key in data){
        // console.log(key);
        // console.log(data[key]);
        data[key].id=key;
        blogsArray.push(data[key]);
        // console.log(blogsArray);
        
      }
        this.blogs=blogsArray;
        console.log(this.blogs);
    })
  },
  //实现搜索过滤,拿到所有内容，在和title匹配,匹配到就展示匹配的,匹配不到就展示所有
  computed: {
    filteredBlogs() {
      return this.blogs.filter(blog => {
        return blog.title.match(this.search);
      });
    },
  },
  //自定义局部过滤器属性
  filters: {
    touppercase(value) {
      return value.toUpperCase();
    },
  },
  //自定义局部指令-彩虹色rainbow
  //   directives: {
  //     rainbow: {
  //       bind(el, binding, vnode) {
  //         //拼接一个彩虹色（element获取元素）;可以生成6位数的16进制随机数
  //         el.style.color = '#' + Math.random().toString(16).slice(2, 8);
  //       },
  //     },
  //   },
};
</script>

<style lang="less" scoped>
#show-blogs {
  max-width: 800px;
  margin: 0 auto;
}
//单条数据样式
.single-blog {
  padding: 20px;
  margin: 20px 0;
  box-sizing: border-box;
  background: #eee;
  border: 1px dotted #aaa;
}
#show-blogs a {
  color: #444;
  text-decoration: none;
}
input[type='text'] {
  padding: 8px;
  width: 100%;
  box-sizing: border-box;
}
</style>
